<template>
  <div class="app-container flex flex-col">
    <GroupsHeader v-model="activeName" :groups="groupMap[groupsKey]" />
    <div class="flex-1 relative">
      <template v-if="activeName === 'group'">
        <RangeLine :key="key_01" :groups="groupMap[groupsKey]"></RangeLine>
      </template>
      <template v-else-if="activeName === 'kill prev group accuracy'">
        <RangeLine
          :key="key_02"
          :show-line-type="2"
          :groups="groupMap[groupsKey]"
        ></RangeLine>
      </template>
      <template v-else-if="activeName === 'group bar line'">
        <GroupBarLine :key="key_03" :groups="groupMap[groupsKey]"></GroupBarLine>
      </template>
      <template v-else-if="activeName === 'number distribution'">
        <NumberDistribution
          :groups="groupMap[groupsKey]"
          :row-size="8"
        />
      </template>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import DateLineViewMixin from '@/mixins/DateLineViewMixin.js'

export default {
  mixins: [DateLineViewMixin],
  data() {
    return {
      groupsKey: ''
    }
  },
  computed: {
    ...mapState('study', ['globalGroupMapBySize']),
    groupMap() {
      return this.globalGroupMapBySize['six']
    }
  },
  created() {
    this.groupsKey = this.$route.meta.groupsKey
  }
}
</script>
